<template>
  <div id="teamCard">
    <van-card
v-for="team in props.teamList"
:desc="team.description"
:title="`${team.name}`"
:thumb="ikun"
>
<template #tags>
  <van-tag plain type="danger" style="margin-right: 8px;margin-top: 8px">
    {{ teamStatusEnum[team.status] }}
  </van-tag>
</template>

<template #bottom>
  <div>
    {{ `队伍人数:${team.hasJoinNum} / ${team.maxNum}` }}
  </div>
  <div v-if="team.expireTime">
    {{ '过期时间:' + team.expireTime }}
  </div>
  <div>
    {{ '创建时间:' + team.createTime }}
  </div>
</template>

<template #footer>
  <van-button v-if="team.userId !== currentUser?.id && !team.hasJoin" size="small" type="primary" plain 
  @click="preJoinTeam(team)">加入队伍</van-button>
  <van-button v-if="team.userId === currentUser?.id" size="small" type="primary" plain 
  @click="doUpdateTeam(team.id)">
    更新队伍
  </van-button>
  <van-button v-if="team.userId !== currentUser?.id && team.hasJoin" size="small" type="primary" plain 
  @click="doQuitTeam(team.id)">
    退出队伍
  </van-button>
  <van-button v-if="team.userId === currentUser?.id" size="small" type="danger" plain 
  @click="doDeleteTeam(team.id)">
    解散队伍
  </van-button>
</template>
</van-card>
<van-dialog v-model:show="showPasswordDialog" title="请输入密码" show-cancel-button 
@confirm="doJoinTeam" @cancel="doJoinCancel">
  <van-field v-model="password" placeholder="请输入密码" />
</van-dialog>
  </div>
</template>

<script setup lang="ts">
import { teamStatusEnum } from "../constants/team"
import { teamType } from "../models/team"
import ikun from "../assets/ikun.jpg";
import { showToast } from 'vant';
import axiosUrl from "../plugins/myAxios";
import { onMounted, ref } from "vue";
import { getCurrentUser } from "../services/user";
import { useRouter } from "vue-router";

interface TeamCardListProps {
    teamList:teamType[];
}
const props = withDefaults(defineProps<TeamCardListProps>(),{
    teamList:[] as teamType[],
});

const currentUser = ref();
const router = useRouter();

const showPasswordDialog = ref(false);
const password = ref('');
const joinTeamId = ref(0);

onMounted(async () => {
  currentUser.value = await getCurrentUser();
  })

const preJoinTeam = (team:teamType) => {
  joinTeamId.value = team.id;
  if(team.status === 0) {
    doJoinTeam()
  } else {
    showPasswordDialog.value = true;
  }
}

//清空
const doJoinCancel =() => {
  joinTeamId.value = 0;
  password.value = '';
}

//加入队伍
const doJoinTeam = async () => {
  if(!joinTeamId) {
    return;
  }
  const res = await axiosUrl.post("/team/join",{
    teamId:joinTeamId.value,
    password:password.value,
  });
  if(res?.code === 0) {
    showToast('加入成功');
    doJoinCancel();
  } else {
    showToast('加入失败' + (res.description ? `,${res.description}` : ''));
  }
}

//跳转到更新队伍
const doUpdateTeam = (id:number) => {
  router.push({
    path:'/team/update',
    query: {
      id,
    }
  })
} 

//退出队伍
const doQuitTeam = async (id:number) => {
  const res = await axiosUrl.post("/team/quit",{
    teamId:id,
  });
  if(res?.code === 0) {
    showToast('操作成功');
  } else {
    showToast('操作失败' + (res.description ? `,${res.description}` : ''));
  }
}

//解散队伍
const doDeleteTeam = async (id:number) => {
  const res = await axiosUrl.post("/team/delete",{
    teamId:id
  });
  if(res?.code === 0) {
    showToast('操作成功');
  } else {
    showToast('操作失败' + (res.description ? `,${res.description}` : ''));
  }
}


function showConfirmDialog(arg0: { title: string; message: string; }) {
throw new Error("Function not implemented.");
}
</script>

<style scoped>
#teamCard :deep(.van-image__img) {
  height: 128px;
  object-fit: unset;
}
</style>